(function () {
    // 1.1 获取1~4的节点
    const circles = document.querySelectorAll('.circle');
    // 1.2 获取进度条节点
    const progress = document.getElementById('progress');
    const nextBtn = document.getElementById('next');
    const prevBtn = document.getElementById('prev');
    // 当前步数
    let index = 1;

    // 2.1 下一步
    nextBtn.addEventListener('click', ()=> {
        index++;
        // 判断index是否大于大于总步数
        if(index>circles.length) {
            index = circles.length;
        }
        update()
    })

    // 2.2 上一步
    prevBtn.addEventListener('click', ()=> {
        index--;
        if(index<1) {
            index = 1;
        }
        update()
    })
    // 3. 更新状态
    function update() {
        circles.forEach((circle, idx) => {
            // 小于当前步数的添加active类，反之移除
            if (idx < index) {
                circle.classList.add('active');
            } else {
                circle.classList.remove('active');
            }
        })


        const actives = document.querySelectorAll('.active');
        console.log(actives.length+'aaa');
        // 进度条只有三段，所以减去1
        progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%';
        // 当步骤数为1或4时，需要禁用按钮
        if(index===1){
            prevBtn.disabled  = true;
        }else if (index === circles.length) {
            nextBtn.disabled  = true;
        }else {
            prevBtn.disabled  = false;
            nextBtn.disabled  = false;
        }
    
    }
})()